<script setup>
import { onMounted, watch,ref } from "vue"
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  nowPage: {
    type: Number,
    required: true
  }
})
const route = useRoute()
const name = ref('')
const countryName = ref('')
const topImg = ref('')
onMounted(async ()=>{
  name.value = route.query.name
  if(name.value==='lp'){
    listData.value = lpListData
    countryName.value = '连平县'
    topImg.value = (await import('../../assets/image/long.jpg')).default
  }
  else if(name.value==='lh'){
    listData.value = lhListData
    countryName.value = '陆河县'
    topImg.value = (await import('../../assets/image/luhe.jpg')).default
  }
})


const bar = ref(null)
onMounted(() => {
  var barActive = bar.value.querySelector('.bar-active')
  watch(() => props.nowPage, (newVal,oldVal)=> {
    if(oldVal===4&&newVal===3){
      bar.value.style.transition = `opacity 0.7s`
      bar.value.style.opacity = 0
      setTimeout(() => {
        bar.value.style.transform = `translateX(0)`
        bar.value.style.left = '4.6rem'
      }, 300);
      setTimeout(() => {
        bar.value.style.transition = `0.7s`
        barActive.style.transform = `translateX(0)`;
        bar.value.style.opacity = 1
      }, 700);
    }
    else if (newVal === 3) {
      bar.value.style.transform = `translateX(0)`
      bar.value.style.left = '4.6rem'
      bar.value.style.transition = `0.7s`
      barActive.style.transform = `translateX(0)`;
    }
    else if (newVal === 4) {
      bar.value.style.transition = `opacity 0.7s`
      bar.value.style.opacity = 0
      setTimeout(() => {
        bar.value.style.left = `calc(100% - 4.6rem)`
        bar.value.style.transform = `translateX(calc(100vw - 100%))`
      }, 300);
      setTimeout(() => {
        bar.value.style.opacity = 1
        barActive.style.transform = `translateX(100%)`;
        barActive.style.transition = `1s ease`;
        bar.value.style.transition = `0.7s`
      }, 700);
    }
  })
})
const listData = ref([])
const lpListData = [
  "1.坚持以“百千万工程”为统领，推动城乡品质再提级。","5.坚持以扩大内需为抓手，推动投资增长再提速。",
  "2.坚持以制造业当家为导向，推动产业质量再提档。","6.坚持以“融湾”“融深”为动力，推动发展环境再提优。",
  "3.坚持以绿美连平生态建设为引领，推动绿色发展再提效。","7.坚持以增进民生福祉为根本，推动社会事业再提升。",
  "4.坚持以乡村全面振兴为目标，推动农业农村再提质。","8.坚持以社会大局稳定为基础，推动安全保障再提标。"
]
const lhListData =[
  "1.坚持把发展经济的着力点放在实体经济上，加快高新区等产业平台的建设，打造“万亩千亿”产业大平台", "5.突出规划引领，完善基础设施，加强城镇管理，提升城乡功能品质，创建全国县级文明城市",
  "2.计划通过优化重点项目建设和推进消费市场活力，持续扩大有效投资，畅通供需循环，释放经济增长潜力", "6.坚持在发展中保障和改善民生，持续推动共富共享，筑牢社会保障安全网",
  "3.推动农业提质增效，发展富民兴村产业，全面推进乡村振兴，加快建设宜居宜业和美乡村", "7.高起点推进绿美陆河生态建设，持续打好蓝天碧水净土保卫战，加快推动形成绿色低碳生产生活方式",
  "4.坚持办好人民满意教育，大力推动科技创新，持续强化招才引智，构建全方位全周期人才服务体系", "8.加强和创新社会治理，确保社会大局稳定，保障人民安居乐业，维护社会公平正义"
]
const listData2 = [
  "1.以政治建设为统领一、构建党建引领发展新格局。","5.以国际化战略为先导提升国际合作综合效能。",
  "2.以深化教育教学改革为重点不断提升拔尖创新人才培养能力。","6.以高效能治理为牵引优化顶层设计。",
  "3.以服务支撑发展为引领着力提升科研创新能力。","7.以“五育井举”为导向全方位做好学生工作。",
  "4.以人才强校为根本推进人才工作高质量发展。","8.以强化办学条件保障为支撑不断提升服务质量。"
]
const emit = defineEmits(['changePage'])
const editPage = (page) => {
  emit('changePage', page)
}
const router = useRouter()
const back = () => {
  router.push('/pre')
}
</script>
<template>
  <div style="display: flex;position: relative;">
    <div class="box">
      <div class="title">
        <h1>{{countryName}}政府</h1>
        <h1>2024年重点工作</h1>
      </div>
      <div class="list">
        <div class="list-item" v-for="item in listData" :key="item">
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="top-img">
        <img :src="topImg" style="width: 100%;" alt="">
      </div>
    </div>
    <div class="box">
      <div class="title" style="margin-left: auto;text-align: right;">
        <h1>深圳技术大学</h1>
        <h1 style="color: #147AD6;">2024年重点工作</h1>
      </div>
      <div class="list">
        <div class="list-item blue-item" style="border-color: #147AD6;" v-for="item in listData2" :key="item">
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="left-img">
        <img src="../../assets/image/xuexiao.png" alt="">
      </div>

    </div>
    <div class="bar" ref="bar">
      <div class="bar-active"></div>
      <span class="bar-item" @click="editPage(3)">县城所需</span>
      <span class="bar-item" @click="editPage(4)">高校所能</span>
      <span class="bar-item" @click="back">返回首页</span>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "pre3Page.scss";
</style>